<template>
  <div class="goods-item">
    <div class="title-wrapper">
      <span class="index">{{ index }}、</span>
      <span class="title">{{ goods.title }}</span>
    </div>
    <div class="author">{{ goods.author }}</div>
    <div class="purchase" @click="addToCart">加入购物车</div>
  </div>
</template>

<script>
export default {
  props: {
    index: Number,
    goods: Object
  },
  methods: {
    addToCart() {
      this.$api.cart.add(this.goods.id).then(() => {
        this.$toast.success("加入购物车");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-item {
  border-bottom: 1px dashed $border_color;
  font-size: 14px;
  height: 52px;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  &:hover {
    background: rgba($color: $deep_color, $alpha: 0.1);
    .purchase {
      color: $color;
      border: 1px dashed $deep_color;
      font-style: italic;
    }
  }
  .title {
    color: $color;
    margin-left: 5px;
  }
  .purchase {
    color: $light_color;
    position: absolute;
    padding: 6px 8px;
    top: 6px;
    right: 5px;
    cursor: pointer;
  }
  .author {
    text-indent: 2em;
    color: $light_color;
  }
}
</style>
